<template>
 <div class="history" style="margin-top:10px">
   <el-card class="card">
     <div slot="header" class="clearfix fatherbox">
      <div class="mask"></div>
      <span>公司真题</span>
      <el-button style="float: right; padding: 3px 0" type="text">全部 ></el-button>
    </div>
    <!-- <div class="hisItem" v-for="item in checkedList" :key="item.cid">
      <el-row>{{item.cname}}</el-row>
      <el-row type="flex" justify="space-between" >
        <el-col :span="8" style="margin-top:7px">
          <span>掌握程度：</span>
        </el-col>
        <el-col :span="13" style="margin-top:7px">
          <el-progress :percentage="50"></el-progress>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" size="small" round>继续练习</el-button>
        </el-col>
      </el-row>
      <el-row>
        <span style="font-size:12px">开始时间:2000-01-18</span>
      </el-row>
    </div> -->
    <div class="hisItem" v-for="item in companyList" :key="item.id">
      <el-row type="flex" >
        <el-col :span="8">
           <el-image
                style="width: 75px; height: 75px"
                :src="item.imgUrl"
                fit="fit"
                >
            </el-image>
        </el-col>
        <el-col :span="16" style="margin-left:-20px">
          <p style="font-weight:900;user-select:none">{{item.name}}</p>
        </el-col>
      </el-row>
      <el-row style="margin-left:70%;margin-top:-10px">
        <span>{{item.hot}}</span><span style="margin-left:5px"><i class="el-icon-view"></i></span>
      </el-row>
    </div>

   </el-card>
 </div>
</template>

<script>
import { getCompanyTruth } from '@/api/exercise'
export default {
  name: 'historicalRecords',
  data () {
    return {
      companyList: []
    }
  },
  props: {

  },
  components: {

  },
  created () {
    this.getCompanyTruth()
  },
  mounted () {},
  methods: {
    format (percentage) {
      return percentage === 100 ? '满' : `${percentage}%`
    },
    async getCompanyTruth () {
      const res = await getCompanyTruth()
      this.companyList = res.data
      console.log(this.companyList)
    }
  },
  computed: {},
  watch: {}
}
</script>

<style scoped lang="less">
  .history{
    height: 80vh;
    margin-right: 10px;
    .card{
      height: 100%;
      margin:0;
    }
    .hisItem{
      padding: 10px;
      margin-bottom: 20px;
      border-radius: 10px;
      background-color: #f8f8f8;
      .el-image{
        border-radius: 20px;
      }
      &:hover{
         background-color: #fff;
         box-shadow: 2px 2px 2px 2px rgb(228, 228, 228);
         transform: translateY(-5px);
      }
    }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .fatherbox{
    position: relative;
  }
  .box-card {
    width: 480px;
  }
  .mask{
    position: absolute;
    top:1px;
    left: -20px;
    width: 10px;
    height: 20px;
    border-radius: 0 5px 5px 0;
    background-color: skyblue;
  }
  }
</style>
